<template>
	<view>
		<view class="mt-2 font-24 font-weight-bold">服务小组</view>
		<view class="row">
			<view class="p-2" :key="index"
			v-for="(item,index) in list1">
				<view class="p-2 flex align-center justify-center font-24"
				:class="itemSelected === index ? 'radio-active':'radio-inactive'" style="border-radius: 10rpx;"
				@click="changeRadio(item,index)">
					 {{item.name}}
				</view>
			</view>
		</view>
		<view class="mt-2 font-24 font-weight-bold">赠送产品</view>
		<view class="row">
			<view class="p-2" :key="index"
			v-for="(item,index) in list2">
				<view class="p-2 flex align-center justify-center font-24"
				:class="selected === index ? 'radio-active':'radio-inactive'" style="border-radius: 10rpx;"
				@click="childClick(item,index)">
					 {{item.name}}
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	export default {
		props: {
			list1: Array,
			list2: Array
		},
		data(){
		  return {
			  itemSelected:null,
			  selected:null,
		  }	
		},
		// watch:{
		// 	show(val){
		// 		if(val){
		// 			if(!this.selected&&!this.itemSelected){
		// 				this.itemSelected=0;
		// 				this.selected=0;
		// 				this.list=this.label[0];
		// 				this.$emit('standardValue',this.list);
		// 				this.$emit('childValue',this.list.skuValue[0]);
		// 			}
		// 		}
		// 	}
		// },
		mounted() {
			// console.log('1111')
		},
		methods: {
			changeRadio(item,index) {
				if(this.itemSelected===index){
					return
				}
				this.itemSelected=index	
			},
			childClick(item,index){
				if(this.selected===index){
					return
				}
				this.selected=index
			},
		},
	}
</script>

<style>
	.radio-inactive{
		background: #F2F2F2;
		color: #333333;
		/* border: 2rpx solid rgba(0,0,0,0.5); */
	}
	.radio-active{
		background: #FCEDEC;
		color: #E93B3D;	
		border: 2rpx solid #E93B3D;
	}
	
</style>
